<template>
  <div class="categroy">
    <div class="btns">
      <el-button :icon="CirclePlus" @click="addShow">新增</el-button>
      <el-button :icon="Select">启用</el-button>
      <el-button :icon="Warning" @click="disableCat">禁用</el-button>
      <el-button :icon="CircleClose" @click="deleCat">删除</el-button>
    </div>
    <div class="content">
      <el-table
        :data="catList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        v-show="tableFlag"
        @cell-click="dj"
        @expand-change="test"
      >
        <el-table-column type="selection" width="55" style="color: black" />
        <el-table-column type="" prop="id" label="ID" />
        <el-table-column prop="type" label="分类名称" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="catdes" label="状态">
          <component
            :is="startIcon"
            style="width: 15px; height: 15px; color: rgb(49, 196, 137)"
          />
        </el-table-column>
        <el-table-column prop="catOp" label="操作">
          <template v-slot="scope">
            <el-icon
              style="margin-right: 10px"
              @click="addCat2(scope.row.id)"
              v-show="scope.row.children !== undefined"
              ><CirclePlusFilled
            /></el-icon>
            <el-icon style="margin-right: 10px" @click="editCat"
              ><EditPen
            /></el-icon>
            <el-icon style="margin-right: 10px" @click="deleCat"
              ><Delete
            /></el-icon>
          </template>
        </el-table-column>
      </el-table>

      <div class="cat" v-show="catFlag">
        <h3>一级分类管理</h3>
        <div style="margin-left: 30px">
          <label
            for=""
            style="font-weight: 600; margin-right: 20px; color: gray"
            >一级分类管理:</label
          ><el-input v-model="catOne" style="width: 400px"></el-input>
        </div>
        <div style="margin-left: 90px; margin-top: 20px">
          <label
            for=""
            style="font-weight: 600; margin-right: 20px; color: gray"
            >排序:</label
          ><el-input v-model="catOrder" style="width: 400px"></el-input>
        </div>
        <div class="notice">备注说明: 设置排序值越大,排名越靠前</div>
        <div style="margin-left: 90px">
          <span style="font-weight: 600; margin-right: 20px; color: gray"
            >状态:</span
          >
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">启用</el-radio>
            <el-radio label="2" size="large">禁用</el-radio>
          </el-radio-group>
        </div>

        <div style="margin-left: 150px; margin-top: 30px">
          <el-button>保存</el-button>
          <el-button style="background: rgb(153, 153, 153)" @click="addBack"
            >取消</el-button
          >
        </div>
      </div>
      <div class="cat2" v-show="catFlag2">
        <h3>二级分类管理</h3>
        <div style="margin-left: 30px; margin-bottom: 10px">
          <label
            for=""
            style="font-weight: 600; margin-right: 20px; color: gray"
            >一级分类:</label
          ><el-input v-model="catOne" style="width: 400px"></el-input>
        </div>
        <div style="margin-left: 30px">
          <label
            for=""
            style="font-weight: 600; margin-right: 20px; color: gray"
            >二级分类:</label
          ><el-input v-model="catOne" style="width: 400px"></el-input>
        </div>
        <div style="margin-left: 90px; margin-top: 20px">
          <label
            for=""
            style="font-weight: 600; margin-right: 20px; color: gray"
            >排序:</label
          ><el-input v-model="catOrder" style="width: 400px"></el-input>
        </div>
        <div class="notice">备注说明: 设置排序值越大,排名越靠前</div>
        <div style="margin-left: 90px">
          <span style="font-weight: 600; margin-right: 20px; color: gray"
            >状态:</span
          >
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">启用</el-radio>
            <el-radio label="2" size="large">禁用</el-radio>
          </el-radio-group>
        </div>

        <div style="margin-left: 90px;display: flex;">
          <span style="color:gray;margin-right: 20px;">图片:</span>
          <div>
            <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            </el-upload>
          </div>
        </div>

        <div style="margin-left: 150px; margin-top: 30px">
          <el-button>保存</el-button>
          <el-button style="background: rgb(153, 153, 153)" @click="addBack"
            >取消</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  CirclePlus,
  Select,
  Warning,
  CircleClose,
} from "@element-plus/icons-vue";
import { ref ,onMounted} from "vue";
import { notiFication } from "@/utils/message.js";
import { ElMessageBox } from "element-plus";
import { getGoodsCat } from "@/api/goodsData.js";

onMounted(()=>{
  getCatData();
})


const tableData = ref([
  {
    id: 1,
    catName: "男装",
    catOrder: 50,
    catdes: "",
    catOp: "",
    children: [
      {
        id: 18,
        catName: "风衣",
        catOrder: 60,
        catdes: "",
        catOp: "",
      },
      {
        id: 19,
        catName: "牛仔裤",
        catOrder: 60,
        catdes: "",
        catOp: "",
      },
    ],
  },
  {
    id: 2,
    catName: "女装",
    catOrder: 50,
    catdes: "",
    catOp: "",
    children: [
      {
        id: 20,
        catName: "连衣裙",
        catOrder: 60,
        catdes: "",
        catOp: "",
      },
      {
        id: 21,
        catName: "毛衣",
        catOrder: 60,
        catdes: "",
        catOp: "",
      },
    ],
  },
]);

//分类数组
const catList = ref([]);

const catOne = ref("");
const catOrder = ref("");

const radio1 = ref("1");

//启用函数小图标
const startIcon = ref("CircleCheckFilled");
//控制表格是否显示
const tableFlag = ref(true);

//控制新增界面是否显示
const catFlag = ref(false);

//控制新增二级分类
const catFlag2 = ref(false);

// 启用函数
function startUse(a) {
  console.log(a);
}

//新增出现函数
function addShow() {
  tableFlag.value = false;
  catFlag.value = true;
}

//新增分类的取消按钮
function addBack() {
  tableFlag.value = true;
  catFlag.value = false;
  catFlag2.value = false;
}

//editCat编辑分类跳转
function editCat() {
  tableFlag.value = false;
  catFlag.value = true;
}

//删除分类
function deleCat() {
  ElMessageBox.confirm("您是否删除分类?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      notiFication("删除成功");
    })
    .catch(() => {
      notiFication("取消成功", "info");
    });
}

//增加分类
function addCat(id) {
  tableFlag.value = false;
  catFlag.value = true;
  console.log(id);
}
//增加分类
function addCat2(id) {
  tableFlag.value = false;
  catFlag2.value = true;
  console.log(id);
}

//禁用分类
function disableCat() {
  ElMessageBox.confirm("您是否禁用分类?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      notiFication("禁用成功");
    })
    .catch(() => {
      notiFication("取消成功", "info");
    });
}

function dj(row) {
  console.log(row);
}

function test(row, expanded) {
  console.log(row);
  console.log(expanded);
}

async function getCatData(){
  const res = await getGoodsCat();
  catList.value = res.data.list;
  // console.log(res);
  // console.log(catList.value)
}
</script>

<style lang="less" scoped>
.categroy {
  margin-top: 30px;
  width: 1340px;

  .btns {
    .el-button {
      color: white;
      box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
      margin-right: 20px;
      width: 100px;
      font-weight: 600;
      height: 43px;
      background: rgb(23, 28, 73);
    }
  }
  .content {
    height: 500px;
    margin-top: 20px;
    box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);

    .el-table {
      --el-table-border: 0;
    }

    .cat {
      display: flex;
      flex-direction: column;
      font-size: 16px;
      .notice {
        background: rgb(254, 240, 240);
        color: red;
        width: 360px;
        height: 30px;
        padding-left: 40px;
        line-height: 30px;
        margin-left: 144px;
        margin-top: 20px;
      }
      h3 {
        margin-left: 30px;
        margin-bottom: 40px;
        font-weight: 600;
      }
      .el-button {
        color: white;
        box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
        margin-right: 20px;
        width: 100px;
        font-weight: 600;
        height: 43px;
        background: rgb(23, 28, 73);
      }
    }
    .cat2 {
      display: flex;
      flex-direction: column;
      font-size: 16px;
      .notice {
        background: rgb(254, 240, 240);
        color: red;
        width: 360px;
        height: 30px;
        padding-left: 40px;
        line-height: 30px;
        margin-left: 144px;
        margin-top: 20px;
      }
      h3 {
        margin-left: 30px;
        margin-bottom: 40px;
        font-weight: 600;
      }
      .el-button {
        color: white;
        box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
        margin-right: 20px;
        width: 100px;
        font-weight: 600;
        height: 43px;
        background: rgb(23, 28, 73);
      }
      :deep(.el-upload-dragger){
        height: 60px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
